<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/top.css">
</head>
<body>
<div class="top">
    <div>
        <div class="company">
            <div></div>
            <div>
                <div></div>
                <div>028-0000000</div>
            </div>
        </div>
    </div>
    <div>
        <div class="nav">
            <!--                字符两端的空格无效-->
            <!--                字符里面的再多的空格只能显示一个空格-->
            <div onclick="location.href='index.html'">网站首页</div>
            <div onclick="location.href='company.html'">公司简介</div>
            <div onclick="location.href='news.html'">新闻信息</div>
            <!--                自定义元素名称还是要见名知意-->
            <div onclick="location.href='product.html'">产品展示
            </div>
            <div onclick="location.href='online.html'">在线留言</div>
            <div>联系外面</div>
        </div>
    </div>
    <div>
        <!--            正常情况下<div></div>  如果你们用<p></p> 它回对div进行封装-->
        <div class="ad">
            <div>
                <div>品味生活 · 品味美食
                </div>
                <div>
                    <div>一壶茶 彻出了生活的醇美</div>
                    <div>一枝花 开出了生活的鲜艳</div>
                    <div>一首诗 吟出了生活的酸辛</div>
                    <div>一把火 燃烧出了生活的激情</div>
                    <div>一枝笔 绘出了人生的五彩缤纷</div>
                    <div>一首歌 唱出了人生的喜怒哀惧</div>
                    <div>生活像五味瓶，这么酸、这么甜、这么苦、又这么辣</div>
                </div>
                <div>
                    <!--                        想要对谁单独控制，就需要加div-->
                    <div>
                        <div pw>品味</div>
                        <div sh>生活</div>
                        <div pw>品味</div>
                        <div ms>美食</div>
                    </div>
                    <div>星语餐饮给你生活指南</div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>